<script setup lang="ts">
import BasicInfo from "../components/BasicInfo.vue";

defineOptions({
  name: "UserInfo"
});

const tabsList = [
  {
    label: "Basic info.",
    components: BasicInfo
  }
];
</script>

<template>
  <div class="userinfo">
    <div class="header">
      <el-tabs type="border-card">
        <el-tab-pane
          v-for="item in tabsList"
          :key="item.label"
          :label="item.label"
        >
          <component :is="item.components" />
        </el-tab-pane>
      </el-tabs>
      <div class="header-label">
        <div class="expansion"></div>
        <div class="title">Edit User Grp. for User</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.userinfo {
  padding: 0 16px;
}

.header {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
  box-sizing: border-box;

  :deep(.el-tabs--border-card) {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-color: black;
    --el-tabs-header-height: 32px;

    > .el-tabs__header {
      background: rgb(50, 96, 147);
      border: 0;
      user-select: none;

      .el-tabs__item {
        color: #fff;
        margin: 0;
        border: 0;
        padding: 6px;

        &.is-active {
          color: var(--el-color-primary);
          border: 0;
          margin: 0;
        }
      }
    }

    .el-tabs__content {
      padding: 6px;
      flex: 1;

      .el-tab-pane {
        height: 100%;
      }
    }
  }

  .header-label {
    position: absolute;
    display: flex;
    width: 100%;
    right: 0;
    top: 0;
    user-select: none;
    background: rgb(50, 96, 147);

    .expansion {
      flex: 1;
      background: linear-gradient(
        -45deg,
        rgb(171, 199, 231),
        rgb(171, 199, 231) 1.8rem,
        transparent 1.8rem,
        transparent
      );
    }

    .title {
      line-height: 2rem;
      color: rgb(50, 96, 147);
      background: rgb(171, 199, 231);
      padding: 0 1rem;
      font-weight: bold;
    }
  }
}
</style>
